ExtJS এ Component Lifecycle হলো একটি কম্পোনেন্টের (যেমন, প্যানেল, গ্রিড, ফর্ম ইত্যাদি) জীবনচক্রের ধারাবাহিকতা। এটি একটি কম্পোনেন্ট তৈরির পর থেকে তার ধ্বংস হওয়া পর্যন্ত ঘটানো বিভিন্ন ইভেন্ট এবং ধাপগুলিকে বোঝায়। এর মধ্যে কম্পোনেন্টের ইনিশিয়ালাইজেশন, রেন্ডারিং, রেসাইজিং, ইন্টারঅ্যাকশন, এবং ধ্বংস প্রক্রিয়া অন্তর্ভুক্ত থাকে।
একটি ExtJS কম্পোনেন্ট সাধারণত নির্মাণ (Creation), রেন্ডারিং (Rendering), ইন্টারঅ্যাকশন (Interaction) এবং ধ্বংস (Destruction) এই চারটি প্রধান পর্যায়ে কাজ করে। প্রতিটি পর্যায়ে বিশেষ ফাংশনালিটি সম্পাদিত হয় এবং বিভিন্ন Lifecycle Hooks (লাইফসাইকেল হুকস) ব্যবহার করা হয়।
Ext.create()
অথবা Ext.Component
এর ইনস্ট্যান্স তৈরি করা হয়।initComponent()
মেথডে কম্পোনেন্টের প্রাথমিক কনফিগারেশন সেটআপ করা হয়।afterRender()
মেথডে UI উপাদান রেন্ডার করার পরে অতিরিক্ত কার্যক্রম সম্পাদিত হয়।onRender()
এর মধ্যে কম্পোনেন্টের ইভেন্ট হ্যান্ডলিং মেথডের সাথে কাজ করা হয়।destroy()
মেথড ব্যবহার করে কম্পোনেন্ট ধ্বংস করা হয় এবং এর সম্পদ মুক্ত করা হয়।ExtJS তে বিভিন্ন লাইফসাইকেল হুকস থাকে যা কম্পোনেন্টের বিভিন্ন ধাপের মধ্যে কল হয়। এগুলি বিশেষ মেথড যা ডেভেলপারদের কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে অতিরিক্ত কার্যক্রম সম্পাদন করার সুযোগ দেয়।
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
initComponent: function() {
// কম্পোনেন্টের জন্য কনফিগারেশন সেট
this.html = 'Hello, World!';
this.callParent(arguments); // প্যারেন্ট ক্লাসের initComponent মেথড কল করা
}
});
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
afterRender: function() {
// রেন্ডারিং পরবর্তী কার্যক্রম
console.log('Component Rendered');
this.callParent(arguments);
}
});
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
onRender: function() {
// UI রেন্ডারিং শেষে কার্যক্রম
console.log('Component DOM Rendered');
this.callParent(arguments);
}
});
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
destroy: function() {
// ধ্বংসের সময় অতিরিক্ত কার্যক্রম
console.log('Component Destroyed');
this.callParent(arguments);
}
});
Life Cycle Hook | Description |
---|---|
initComponent() | কম্পোনেন্ট তৈরির সময় কল হয়। ইনিশিয়াল কনফিগারেশন এবং সেটআপ করা হয়। |
afterRender() | রেন্ডারিং শেষ হওয়ার পরে কল হয়। UI উপাদান সম্পূর্ণরূপে রেন্ডার হওয়ার পরে অতিরিক্ত কার্যক্রম সম্পাদিত হয়। |
onRender() | DOM রেন্ডারিং সম্পন্ন হওয়ার পরে কল হয়। UI এলিমেন্ট ইন্টারঅ্যাকশন শুরু হওয়ার সময়। |
destroy() | কম্পোনেন্ট ধ্বংস হলে কল হয়। সমস্ত সম্পর্কিত সম্পদ, ইভেন্ট লিসেনার এবং অন্যান্য উপাদান মুক্ত করা হয়। |
ExtJS এর Component Lifecycle এবং Lifecycle Hooks ডেভেলপারদের কম্পোনেন্টের বিভিন্ন ধাপে অতিরিক্ত কার্যক্রম পরিচালনা করার সুযোগ দেয়। কম্পোনেন্ট তৈরির সময় কনফিগারেশন থেকে শুরু করে ধ্বংস হওয়া পর্যন্ত প্রতিটি ধাপে লাইফসাইকেল হুকস কাজ করে, যা অ্যাপ্লিকেশনের পারফরম্যান্স এবং রক্ষণাবেক্ষণকে সহজ করে তোলে। initComponent()
, afterRender()
, onRender()
, এবং destroy()
এর মতো লাইফসাইকেল হুকস আপনাকে আরো নিয়ন্ত্রিত এবং কার্যকর কম্পোনেন্ট ডেভেলপমেন্টের সুযোগ প্রদান করে।
Read more